<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Queue</title>

    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>
<body>

<div class="container">

    <h1>Order</h1>

    <form id="orderForm" class="form-horizontal">
        <div class="form-group">
            <label class="col-md-2 control-label" for="customerName">Name</label>
            <div class="col-md-6">
                <input type="text" id="customerName" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label" for="orderMethod">Order method</label>
            <div class="col-md-10">
                <select id="orderMethod">
                    <option value="http">HTTP</option>
                    <option value="messaging">Messaging / Kafka</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label" for="product">Product</label>
            <div class="col-md-10">
                <select id="product">
                    <option value="frappuccino">Frappuccino</option>
                    <option value="chai">Chai</option>
                    <option value="hot-chocolate">Hot Chocolate</option>
                    <option value="latte">Latte</option>
                    <option value="espresso">Espresso</option>
                    <option value="mocha">Mocha</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-10 col-md-offset-2">
                <button id="order-button" type="submit" class="btn btn-primary">Place order</button>
            </div>
        </div>
    </form>

</div>

<div class="container" id="order-result-message"></div>

<div class="container">

    <h1>Queue</h1>

    <table class="table table-striped">
        <thead class="thead-dark">
        <tr>
            <th>Customer</th>
            <th>Product</th>
            <th>Prepared By</th>
            <th>State</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</div>





</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/js/patternfly.min.js"></script>

<script>

    $("#orderForm").submit(function(event){
        const method = $("#orderMethod option:selected").val();
        const order = {
            name: $("#customerName").val(),
            product: $("#product option:selected").val()
        };
        console.log("Customer name = " + order.name);

        if(method==="http") {
            const state = {
                customer: order.name,
                beverage: order.product,
                preparationState: "IN_PROGRESS"
            };
            $("tbody").prepend(line(state));
            $("#order-button").addClass("disabled").attr("disabled", true);
        }

        event.preventDefault();
        const post_url = "/" + method; //get form action url
        const request_method = "POST"; //get form GET/POST method
        
        $.ajax({
            url : post_url,
            type: request_method,
            data : JSON.stringify(order),
            contentType: 'application/json',
            cache: false
        }).done(function(response){
            if(method==="http") {
                const state = {
                    orderId: response.orderId,
                    customer: order.name,
                    beverage: order.product,
                    preparedBy: response.preparedBy,
                    preparationState: response.preparationState
                };
                $('tbody tr:first').replaceWith(line(state));
                $("#order-button").removeClass("disabled").removeAttr("disabled");
            }
        }).fail(function(err) {
            $("#order-result-message").append("<div class='alert alert-danger alert-dismissable'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span class='pficon pficon-close'></span></button><span class='pficon pficon-error-circle-o'></span><strong>Error</strong>" + err.responseText + "</div>");
            $('tbody tr:last').remove();
            $("#order-button").removeClass("disabled").removeAttr("disabled");
            console.error(err);
        });
    });

    $(function () {
        const source = new EventSource("/queue");
        source.onmessage = function(e) {
            if (e.data === "{}") {
                return;
            }
            console.log(e);
            const beverage = JSON.parse(e.data);
            if(beverage.preparationState==="IN_QUEUE")
                $("tbody").prepend(line(beverage));
            if(beverage.preparationState==="READY")
                $("#"+beverage.orderId).replaceWith(line(beverage));
            
        };
    });

    function line(order) {
        const id = order.orderId;
        const product = order.beverage;
        const customer = order.customer;
        let barista = "";
        if (order.preparedBy) {
            barista = order.preparedBy;
        }
        return "<tr id='" + id + "'>" +
            "<td>" + customer + "</td>" +
            "<td>" + product + "</td>" +
            "<td>" + barista + "</td>" +
            "<td>" + order.preparationState + "</td></tr>";
    }


</script>
</html>